<template>
	<view class="content">
		<view class="nuter">
			<view :class="tabIndex == 0 ? 'active' : ''" @click="changeTabIndex(0)" data-index="0">待审核</view>
			<view :class="tabIndex == 1 ? 'active' : ''" @click="changeTabIndex(1)" data-index="1">未通过</view>
			<view :class="tabIndex == 2 ? 'active' : ''" @click="changeTabIndex(2)" data-index="2">已通过</view>
		</view>
		<scrollView height1="92vh" :isReloadComplete1="isReloadComplete" :isShowBottomView1="isShowBottomView" :isShowNodata1="isReloadComplete && !isNoData" @downdata="downdata" @updata="updata"
		@onScroll="onScroll">
			<view v-if="tabIndex === 0">
				<view class="no-data-box" v-if="checkList.list.length == 0">
					<image class="no-data" src="../../../static/index/no_data.png">
					</image>
				</view>
				<view v-else>
					<view v-for="(item, index) in checkList.list" class="info" @click="toDetail(item.id)">
						<view class="info-title">审核名称：{{ item.firm }}</view>
						<view class="info-user">申请人：{{ item.nickname }}</view>
						<view class="info-time">{{ item.insert_time }}</view>
						<view class="icon">{{ item.type === 1 ? '企业' : '组织' }}</view>
					</view>
				</view>
			</view>
			<view v-if="tabIndex === 1">
				<view class="no-data-box" v-if="rejectList.list.length == 0">
					<image class="no-data" src="../../../static/index/no_data.png">
					</image>
				</view>
				<view v-else>
					<view v-for="(item, index) in rejectList.list" class="info">
						<view class="info-title">审核名称：{{ item.firm }}</view>
						<view class="info-user">申请人：{{ item.nickname }}</view>
						<view class="info-time">{{ item.insert_time }}</view>
						<view class="icon">{{ item.type === 1 ? '企业' : '组织' }}</view>
					</view>
				</view>
			</view>
			<view v-if="tabIndex === 2">
				<view class="no-data-box" v-if="passList.list.length == 0">
					<image class="no-data" src="../../../static/index/no_data.png">
					</image>
				</view>
				<view v-else>
					<view v-for="(item, index) in passList.list" class="info">
						<view class="info-title">审核名称：{{ item.firm }}</view>
						<view class="info-user">申请人：{{ item.nickname }}</view>
						<view class="info-time">{{ item.insert_time }}</view>
						<view class="icon">{{ item.type === 1 ? '企业' : '组织' }}</view>
					</view>
				</view>
			</view>
			<!-- <ourLoading isFullScreen :active="active" text="loading..." color="#13b6ff" textColor="#13b6ff" /> -->
			<!-- // 返回顶部 -->
			<selfRoll :active="roll" :left="right" @scrollTo="scrollTo"></selfRoll>
		</scrollView>
	</view>
</template>
<script>
	import scrollView from '../../../components/scroll-view/scroll-view.vue';
	// import ourLoading from '../../../components/Loading/index.vue';
	import selfRoll from '../../../components/self-roll/roll.vue';
	
	export default {
		components: {
			scrollView,
			// ourLoading,
			selfRoll
		},
		data() {
			return {
				// 点击tab的下标
				tabIndex: 0,
				isReloadComplete: false,
				isNoData: true,
				iserror: false,
				checkList: {
					page: 1,
					size: 5,
					list: [],
					isReloadComplete: false,
					isNoData: true
				},
				rejectList: {
					page: 1,
					size: 5,
					list: [],
					isReloadComplete: false,
					isNoData: true
				},
				passList: {
					page: 1,
					size: 5,
					list: [],
					isReloadComplete: false,
					isNoData: true
				},
				roll: false, //返回顶部
				right: '80vw', //右侧距离
				systemHeight: 0, //系统高度
				isShowBottomView: false
				
			}
		},
		onLoad() {
			//页面初始化调用未审核列表
			this.getList(0);
			this.systemHeight = this.getSystemMsg('windowHeight');
		},
		onShow() {
			this.tabIndex = 0;
			this.isReloadComplete = false;
			this.isNoData = true;
			this.iserror = false;
			this.checkList = {
				page: 1,
				size: 5,
				list: [],
				isReloadComplete: false,
				isNoData: true
			};
			this.rejectList = {
				page: 1,
				size: 5,
				list: [],
				isReloadComplete: false,
				isNoData: true
			};
			this.passList = {
				page: 1,
				size: 5,
				list: [],
				isReloadComplete: false,
				isNoData: true
			};
			this.roll = false; //返回顶部
			this.right = '80vw'; //右侧距离
			this.systemHeight = 0; //系统高度
			this.isShowBottomView = false;
			this.getList(0);
		},
		methods: {
			// 0 待审核  1 审核失败  2 审核成功
			async getList(index) {
				let self = this;
				this.iserror = true;
				let params = {};
				switch (index) {
					case 0:
						params = {
							type: index,
							page: self.checkList.page,
							psize: self.checkList.size
						}
					break
					case 1:
						params = {
							type: index,
							page: self.rejectList.page,
							psize: self.rejectList.size
						}
					break
					case 2:
						params = {
							type: index,
							page: self.passList.page,
							psize: self.passList.size
						}
					break
				}
				const res = await self.$u.api.KF_get_sgc_list(params);
				if(res.code === 200) {
					switch (index) {
						case 0:
							if(self.checkList.page === 1) {
								// 首次加载
								self.checkList.list = res.data.data;
								self.checkList.page_count = res.data.page_count;
							} else {
								self.checkList.list.push(...res.data.data)
							}
						break
						case 1:
							if(self.rejectList.page === 1) {
								// 首次加载
								self.rejectList.list = res.data.data;
								self.rejectList.page_count = res.data.page_count;
							} else {
								self.rejectList.list.push(...res.data.data)
							}
						break
						case 2:
							if(self.passList.page === 1) {
								// 首次加载
								self.passList.list = res.data.data;
								self.passList.page_count = res.data.page_count;
							} else {
								self.passList.list.push(...res.data.data)
							}
						break
					}
					this.iserror = true;
				} else {
					this.iserror = true;
				}
			},
			changeTabIndex(index) {
				this.tabIndex = index;
				this.isShowBottomView = false;
				switch (index) {
					case 0:
						this.isReloadComplete = this.checkList.isReloadComplete;
						this.isNoData = this.checkList.isNoData;
					break
					case 1:
						this.isReloadComplete = this.rejectList.isReloadComplete;
						this.isNoData = this.rejectList.isNoData;
					break
					case 2:
						this.isReloadComplete = this.passList.isReloadComplete;
						this.isNoData = this.passList.isNoData;
					break
				}
				if(!this.checkList.list.length || !this.rejectList.list.length || !this.passList.list.length) {
					this.getList(index);
				}
				uni.$emit('goTop', '');
				this.$set(this, 'roll', false);
			},
			// 下拉刷新
			downdata() {
				let self = this;
				this.isShowBottomView = false;
				setTimeout(() => {
					uni.$emit('downdataHD', {
						type: 'down'
					});
					switch (this.tabIndex) {
						case 0:
							self.checkList.page = 1;
							self.checkList.list = [];
							self.checkList.isReloadComplete = false;
							self.checkList.isNoData = true;
							self.isReloadComplete = self.checkList.isReloadComplete;
							self.isNoData = self.checkList.isNoData;
							break
						case 1:
							self.rejectList.page = 1;
							self.rejectList.list = [];
							self.rejectList.isReloadComplete = false;
							self.rejectList.isNoData = true;
							self.isReloadComplete = self.rejectList.isReloadComplete;
							self.isNoData = self.rejectList.isNoData;
							break
						case 2:
							self.passList.page = 1;
							self.passList.list = [];
							self.passList.isReloadComplete = false;
							self.passList.isNoData = true;
							self.isReloadComplete = self.passList.isReloadComplete;
							self.isNoData = self.passList.isNoData;
					}
					self.getList(self.tabIndex);
				}, 1000)
			},
			// 上拉加载
			updata() {
				let self = this;
				this.isShowBottomView = true;
				switch (self.tabIndex) {
					case 0:
						if(self.checkList.page < self.checkList.page_count) {
							self.checkList.page++;
						} else {
							self.checkList.isReloadComplete = true;
							self.checkList.isNoData = false;
							self.isReloadComplete = self.checkList.isReloadComplete;
							self.isNoData = self.checkList.isNoData;
							uni.$emit('updataHD', {
								type: 'up'
							});
							this.isShowBottomView = false;
							return 
						}
						break
					case 1:
						if(self.rejectList.page < self.rejectList.page_count) {
							self.rejectList.page++;
						} else {
							self.rejectList.isReloadComplete = true;
							self.rejectList.isNoData = false;
							self.isReloadComplete = self.rejectList.isReloadComplete;
							self.isNoData = self.rejectList.isNoData;
							uni.$emit('updataHD', {
								type: 'up'
							});
							this.isShowBottomView = false;
							return 
						}
						break
					case 2:
						if(self.passList.page < self.passList.page_count) {
							self.passList.page++;
						} else {
							self.passList.isReloadComplete = true;
							self.passList.isNoData = false;
							self.isReloadComplete = self.passList.isReloadComplete;
							self.isNoData = self.passList.isNoData;
							uni.$emit('updataHD', {
								type: 'up'
							});
							this.isShowBottomView = false;
							return 
						}
						break
				}
				self.getList(self.tabIndex);
				this.isShowBottomView = false;
			},
			// 页面滚动
			onScroll(e) {
				if (e.scrollTop > this.systemHeight) {
					this.roll = true;
				} else {
					this.roll = false;
				}
			},
			/*scrollview返回远点*/
			scrollTo() {
				uni.$emit('goTop', '');
			},
			//获取系统参数
			getSystemMsg: function(key) {
				var result = '';
				uni.getSystemInfo({
					success: (res) => {
						if (key === 'windowHeight') {
							result = res.windowHeight;
						}
					}
				});
				return result;
			},
			toDetail(id) {
				console.log('id', id)
				uni.navigateTo({
				    url: `sgc-detail?id=${id}`
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #f8f8f8;
	}
	.nuter {
	  width: 100%;
	  height: 80rpx;
	  line-height: 80rpx;
	  display: flex;
	  justify-content: space-around;
	  font-size: 35rpx;
	}
	.nuter view {
	  flex: 1;
	  font-size: 30rpx;
	  color: #666666;
	  text-align: center;
	  transition: all 0.5s ease 0.1s;
	  background-color: #fff;
	}
	// 高亮样式
	.active {
	  width: 50rpx;
	  box-sizing: border-box;
	  color: #000;
	  border-bottom: 5rpx solid #6adfe9;
	  background-color: #f3ffff;
	}
	// 列表无数据样式
	.no-data-box {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	
		.no-data {
			width: 435rpx;
			height: 343rpx;
			align-self: center;
		}
	}
	// 列表数据样式
	.info {
		position: relative;
		background-color: #FFFFFF;
		box-shadow: 0px 3px 7px 0px rgba(217, 217, 217, 0.4);
		border-radius: 10rpx;
		margin: 40rpx 30rpx;
		padding-top: 30rpx;
		border-radius: 10rpx;
		overflow: hidden;
		.info-title {
			color: #FF5B76;
			font-weight: 500;
			font-size: 32rpx;
			margin: 0 0 30rpx 30rpx;
		}
		.info-user {
			font-size: 28rpx;
			margin: 0 0 50rpx 30rpx;
		}
		.info-time {
			border-top: 2rpx solid #D9D9D9;
			padding: 14rpx 20rpx;
			font-size: 24rpx;
			text-align: right;
			color: #646464;
		}
		.icon {
			position: absolute;
			top: 0;
			right: 0;
			background: url(../../../static/check-img/icon-bg.png) no-repeat;
			width: 140rpx;
			height: 140rpx;
			text-align: right;
			padding: 30rpx 16rpx 0 0;
			color: #FFFFFF; 
		}
	}
</style>
